<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE HTML>
<html >
<head>
	<meta charset="UTF-8">
	<title>凯胜项目管理系统</title>
	<link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css" />
	<link rel="stylesheet" href="static/css/daohang.css" type="text/css" />
	<link rel="stylesheet" href="static/css/style.css" type="text/css" />
	<style type="text/css">
		.clear{
			clear:botn;
		}
		.left .top{
			border: 8px solid #b9b2a2;
			border-radius: 42px 42px 42px 42px;
			height: 68px;
			/* filter:alpha(opacity=80);
			 -moz-opacity:0.8;
			opacity:0.8;   */
			margin: 0 0 3px;
			position: relative;
			width: 68px;
		}
		#image{
			width:68px;
			height:68px;
		}
		
		#modal-body:hover{
			-webkit-transform: scale(1.05);
  			-moz-transform: scale(1.05);
  			-o-transform: scale(1.05);
  			/* -moz-box-shadow:3px 3px 3px rgba(0,0,0,.7);
  			-webkit-box-shadow: 3px 3px 3px rgba(0,0,0,.7);
  			box-shadow:3px 3px 3px rgba(0,0,0,.7); */
			cursor:pointer;
		}
		body{
			background-image:url("static/img/bg_main.jpg");
		}
		.nav-tabs > .active > a, .nav-tabs > .active > a:hover {
		  background-color:transparent;
		  border-color:#B9B2A2 #B9B2A2 transparent;
		  border-style:solid;
		  border-width:2px;
		  border-bottom:0 none;
		  color:#555555;
		  cursor:default;
		}
		
		
		#immm{
			width:50px;
			height:50px;
			float: left;
		}
		
		.immmm{
			background-color: #B0B3B6;
		    background-position: center center;
		    border: medium none;
		    border-radius: 5px 5px 5px 5px;
		    box-shadow: 0 1px 2px #B0B3B6;
		    display: block;
		    height: 50px;
		    outline: medium none;
		    text-indent: -9999px;
		    width: 50px;

		}
		
		
		
	</style>
</head>
<body class="body">
	<%@ include file="include/top2.jsp" %>
	<jsp:include page="include/top.jsp">
		<jsp:param value="new" name="tag"/>
	</jsp:include>
	
	<div class="container">
		<div class="row">
			<%-- <jsp:include page="include/side.jsp">
				<jsp:param value="new" name="tag"/>
			</jsp:include> --%>
			<div class="span9">
				<ul class="breadcrumb" style="margin-bottom:0px;border-radius:28px 0 28px 0;">
					<li class="active"><i class="icon-th"></i>你在想什么？</li>
				</ul>
				<br/>
				<div class="wall">
					<form style="margin:0px" action="trend.jspx?m=trend" method="post">
						<textarea name="content" id="" rows="4" placeholder="留下您珍贵的创意和想法" style="width:520px;background-color:transparent;border-radius:5px 5px 0 0;border:2px solid #b9b2a2;"></textarea>
						
					 	<c:if test="${param.code ==10001}">
					 		<div style="color:red;font-size:16px;">
					 			你输入的内容不能为空！
					 		</div><br>
					 	</c:if>
					 	<br>
					 <button class="btn" style="margin-left:470px;color:blue;border-radius:17px 0 17px 0;width:65px;">发布</button>
					</form>
				</div>
				
				<br />
		<div class="tabbable" >	
			<div class="tab-content">
			
				<ul class="nav nav-tabs" style="margin-bottom:opx;border-radius:5px 5px 5px 5px; margin-top:20;border-bottom:2px solid #B9B2A2;" >
					<li class="active" style="margin-left:10px;"><a href="#tab1" data-toggle="tab" onmouseover="setTab(1)" style="font-size:16px;"><i class="icon-th"></i><strong>信息流</strong></a></li>
					<li><a href="#tab2" data-toggle="tab" onmouseover="setTab(2)" style="font-size:16px;"><strong>@ME</strong></a></li>
				</ul><br>
				<div id="tab1" class="active tab-pane">
				<c:forEach items="${page.result}" var="p">
				<div id="divss">
					<div class="div">
						<div class="left">
							<div class="top" style="overflow:hidden;">
								<img alt="" src="img.jspx?img=${p.user.image }" width="68px" height="68px" id="image">
							</div>
							<p style="position:absolute;left:145px;margin-top:5px;right:25px;top:10px;font-size:20px;color:#0088cc;">say....</p>
							<div class="mm">
							</div>
							<div class="middle">
								<a href="" style="font-size:18px;margin-left:15px;">${p.user.userName}</a>
							</div>
							<div class="bottom">
								${p.time}
							</div>
						</div>
						<div class="right">
							<p style="font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;${p.content}</p>
							<div class="abtn">
								<a class="btn" data-toggle="modal" href="#myModal${p.id}" >评论</a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
					</div>
					<br>
								<div class="modal hide fade" id="myModal${p.id}" style="clear:both;">
								  <div class="modal-header">
								    <button type="button" class="close" data-dismiss="modal">×</button>
								    <form action="trend.jspx?m=say&id=${p.id}" method="post">
										<textarea name="message" rows="3" placeholder="写下您珍贵的点评" style="width:320px"></textarea>
										<br>
										<button class="btn btn-primary">评论</button>
									</form>
								    <h3>评论信息</h3>
								    <c:forEach items="${commentList }" var="mm">
								    	<div class="modal-body">
									  	 <c:if test="${p.id eq mm.trendid }">
									  	 <div id="modal-body" style="width:320px;height:60px;">
									  	 	<div style="float:left;width:50px;">
												<div id="immm">
												<img alt="" src="img.jspx?img=${mm.user.image }" width="50px" height="50px" class="immmm">
												</div>
									  			<span style="font-size:16px;color:#3e3e3e;" >${mm.user.userName}</span>
									  		</div>
									  		<div style="float:left;width:260px;">
									    		<p style="font-size:14px;"><strong>:</strong>&nbsp;&nbsp;&nbsp;&nbsp;${mm.message}</p>
										   		<span style="color:blue;float:right;">${mm.time}</span>	
										   	</div>
										   	<hr style="border:1px dotted pink;clear:both;">
										   	</div>
										 </c:if>
										 </div>
										 	
									  </c:forEach>
								  </div>
							</div>
				</c:forEach>
				
				
				 
				</div>
				
				<div id="tab2" class="tab-pane">
				<c:forEach items="${page.result}" var="p">
				<c:forEach items="${trendidList}" var="p2">
				<c:if test="${p2.trendid eq p.id}">
				<div id="divss">
					<div class="div">
						<div class="left">
							<div class="top">
								<img alt="" src="img.jspx?img=${p.user.image }">
							</div>
							<p style="position:absolute;left:145px;margin-top:7px;right:25px;top:10px;font-size:16px;color:pink;">say....</p>
							<div class="mm">
								
							</div>
							<div class="middle">
								<a href="" style="font-size:18px;margin-left:15px;">${p.user.userName}</a>
							</div>
							<div class="bottom">
								${p.time}
							</div>
						</div>
						<div class="right">
							<p style="font-size:16px;">&nbsp;&nbsp;&nbsp;&nbsp;${p.content}</p>
							<div class="abtn">
								<a class="btn" data-toggle="modal" href="#myModall${p.id}" >评论</a>
							</div>
						</div>
						<div class="clear"></div>
					</div>
					</div>
					<br>
					
							<div class="modal hide fade" id="myModall${p.id}" style="clear:both;">
								  <div class="modal-header">
								    <button type="button" class="close" data-dismiss="modal">×</button>
								    <form action="trend.jspx?m=say&id=${p.id}" method="post">
										<textarea name="message" rows="3" placeholder="写下您珍贵的点评" style="width:320px"></textarea>
										<br>
										<button class="btn btn-primary">评论</button>
									</form>
								    <h3>评论信息</h3>
								    <c:forEach items="${commentList }" var="mm">
								    	<div class="modal-body">
									  	 <c:if test="${p.id eq mm.trendid }">
									  	 <div id="modal-body" style="width:320px;height:60px;">
									  	 	<div style="float:left;width:60px;">
												<img alt="" src="img.jspx?img=${mm.user.image}">
									  		<span style="font-size:16px;color:#3e3e3e">${mm.user.userName}</span>
									  		</div>
									  		<div style="float:left;width:260px;">
									    	<p style="font-size:14px;"><strong>:</strong>&nbsp;&nbsp;&nbsp;&nbsp;${mm.message}</p>
										   	<span style="color:blue;float:right;">${mm.time}</span>	
										   	</div>
										   	<hr style="border:1px dotted pink;clear:both;">
										   	</div>
										 </c:if>
										 </div>
									  </c:forEach>
								  </div>
							</div>
						</c:if>	
				</c:forEach> 
			</c:forEach>
				</div>
			</div>
		</div>
				
				<%-- <c:forEach items="${page.result}" var="p">
				<div>
					<img width="30px" alt="" src="static/img/${p.user.image}.png"> ${p.user.userName} &nbsp;&nbsp;:&nbsp;&nbsp;${p.content}
					
					${p.time}<br>
						<a class="btn" data-toggle="modal" href="#myModal">评论</a>
					</div>	
				</c:forEach> --%>
						
				  	<div class="pagination pull-right" style="clear:both;">
					
				  		<%-- 共${page.totalPages }页当前第${page.pageNum }页 --%>
				  		<ul>
				  		<li>
						  	<c:choose>
					  		<c:when test="${page.pageNum == 1 }">
					  			<a href="#">首页</a>
					  		</c:when>
					  		<c:otherwise>
							  	<a href="trend.jspx?p=1">首页</a>
					  		</c:otherwise>
					  	</c:choose>
					  	</li>
					  	<li>
					  	<c:choose>
					  		<c:when test="${page.pageNum == 1 }">
					  			<a>上一页</a>
					  		</c:when>
					  		<c:otherwise>
							  	<a href="trend.jspx?p=${page.pageNum - 1 }">上一页</a>
					  		</c:otherwise>
					  	</c:choose>
					  	</li>
					  	<li>
					  	<c:choose>
					  		<c:when test="${page.pageNum == page.totalPages }">
					  			<a href="#">下一页</a>
					  		</c:when>
					  		<c:otherwise>
							  	<a href="trend.jspx?p=${page.pageNum + 1 }">下一页</a>
					  		</c:otherwise>
					  	</c:choose>
					  	</li>
					  	<li>
					  	<c:choose>
					  		<c:when test="${page.pageNum == page.totalPages }">
					  			<a href="#">尾页</a>
					  		</c:when>
					  		<c:otherwise>
							  	<a href="trend.jspx?p=${page.totalPages}">尾页</a>
					  		</c:otherwise>
					  	</c:choose>
					  	</li>
					  	</ul>
					</div>
			</div>
			<div class="span3">
					<div class="box" style="margin-left:30px;">
						&nbsp;<div class="head"><h4>我的任务</h4></div>
						<br />
						<ul>
						
						<c:forEach items="${taskList }" var="task">
							<li><a href="task.jspx?m=task&id=${task.id}" style="font-size:16px;">${task.taskTitle }</a></li>
							<span style="font-size:12px;">
							<c:choose>
							<c:when test="${task.time eq 'a'}">
								还没有开始！
							</c:when>
							<c:when test="${task.time eq 'b'}">
								正在进行中...
							</c:when>
							<c:when test="${task.time eq 'c'}">
								已经过期！
							</c:when>
						</c:choose>
							</span>
							
						</c:forEach>	
						</ul>
					</div>
					
				</div>
			</div>
		</div>
	
	<p id="back-top" style="padding-right:0px; display: block;">
		<a href="#top">
		<span><img src="static/img/fff.png"/></span>
		</a>
	</p>
	<script type="text/javascript" src="static/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="staic/js/jquery.js"></script>
	<script type="text/javascript" src="static/js/jqueryui.js"></script>
	<script type="text/javascript" src="static/js/jquery.illuminate.0.7.min.js"></script>
	
	<script type="text/javascript">
		$(document).ready(function(){
				
			$('#button').illuminate({
				'intensity': '0.5',
				'color': '#2c2c2c'
			});
				
		});
			
		$(document).ready(function(){
		
			$("#showModel").click(function(){
				$("#myModel${p.id}").modal();
			});
			$("#showModel").click(function(){
				$("#myModell${p.id}").modal();
			});
			$(".input").btn();
		});
		
	</script>
</body>
</html>